<template>
  <div >
    <!-- <div class="header-top" :class="headertops?'headerboc':''"> -->
<!--       <router-link to="/setup">
        <span> <i slot="icon" class="icons iconfont">&#xe620;</i>
        </span>
      </router-link> -->
    <!-- </div> -->
    <scroller lock-x scrollbar-y use-pulldown :height="heig" @on-pulldown-loading="loadall" ref="demo3" v-model="status2">

      <div class="box2">
      <router-link to="/setup" class="logostop">
        <span> <i slot="icon" class="icons iconfont">&#xe620;</i>
        </span>
      </router-link>

        <blur :blur-amount=35 :url="url">
          <p class="center">
            <img :src="url"></p>
          <div class="name">Admin</div>
          <div class="plrig">

            <div class="numberbox">
              <countup :start-val="1" :end-val="13898" :duration="3">--</countup >
              <div class="text-c">粉丝</div>
            </div>
          </div>
        </blur>

        <div class="personage">
          <div slot="content" class="card-demo-flex card-demo-content01" >
            <router-link to="/logo/resgi">
              <div class="tip">1130</div>
              <div>收藏夹</div>
            </router-link>
            <router-link to="/logo/resgi">
              <div class="tip">15</div>
              <div>我的关注</div>
            </router-link>
            <router-link to="/logo/resgi">
              <div class="tip">88</div>
              <div>我的积分</div>
            </router-link>
          </div>
        </div>

        <div class="gridlistbox">
          <div class="grid-box">
          <router-link to="/editupd" class="flbox">
              <div class=" rigbef">
                <div> <i class="icons iconfont" >&#xe79e;</i>
                </div>
                <div>投稿</div>
              </div>
          </router-link>

            <div class="flbox">
              <div>
                <i class="icons iconfont"  style="color:#34A2D9">&#xe6d7;</i>
              </div>
              <div>成长历程</div>
            </div>

            <div class="flbox leftbef">
              <div>
                <i class="icons iconfont"  style="color:#f00">&#xe621;</i>
              </div>
              <div>等级</div>
            </div>
          </div>

          <div class="grid-box">
           <router-link to="/draft" class="flbox">
              <div>
                <i class="icons iconfont" style="color:#FFCE44" >&#xe690;</i>
              </div>
              <div>本地稿件</div>
            </router-link>
            <div class="flbox">
              <div>
                <i class="icons iconfont" style="color:#F9525A">&#xe64a;</i>
              </div>
              <div>打赏</div>
            </div>
            <div class="flbox">
              <div>
                <i class="icons iconfont" style="color:#317B4D">&#xe614;</i>
              </div>
              <div>分享</div>
            </div>
          </div>
        </div>

        <div class="liveuserdt">
          <div class="h1title">我的关注</div>

          <div class="content">
            <div class="toptitle">
              <div class="userlogo">
                <img src="http://file06.16sucai.com/2015/1126/22ee57582d53a8ad1ea259bc3ab2be1e.jpg"></div>
              <div class="username">张三发布了最新文章</div>
              <div class="datetime">2015.05.22 9:22</div>
            </div>

            <div class="bottomtitle">
                <div class="articlecontents">
                  <img class="articleimg" src="http://file06.16sucai.com/2015/1126/22ee57582d53a8ad1ea259bc3ab2be1e.jpg">
                  <span class="articletitle">啊圣诞节阿斯兰打开就啊三了可的那三的啊斯科拉多久啊老师可的就啊了可达三大斯科拉多久啊老大可就啊</span>
                </div>
            </div>
          </div>
                    <div class="content">
            <div class="toptitle">
              <div class="userlogo">
                <img src="http://file06.16sucai.com/2015/1126/22ee57582d53a8ad1ea259bc3ab2be1e.jpg"></div>
              <div class="username">张三发布了最新文章</div>
              <div class="datetime">2015.05.22 9:22</div>
            </div>

            <div class="bottomtitle">
                <div class="articlecontents">
                  <img class="articleimg" src="http://file06.16sucai.com/2015/1126/22ee57582d53a8ad1ea259bc3ab2be1e.jpg">
                  <span class="articletitle">ff</span>
                </div>
            </div>
          </div>
                    <div class="content">
            <div class="toptitle">
              <div class="userlogo">
                <img src="http://file06.16sucai.com/2015/1126/22ee57582d53a8ad1ea259bc3ab2be1e.jpg"></div>
              <div class="username">张三发布了最新文章</div>
              <div class="datetime">2015.05.22 9:22</div>
            </div>

            <div class="bottomtitle">
                <div class="articlecontents">
                  <img class="articleimg" src="http://file06.16sucai.com/2015/1126/22ee57582d53a8ad1ea259bc3ab2be1e.jpg">
                  <span class="articletitle">ff</span>
                </div>
            </div>
          </div>



           <div></div>
        </div>


        <!-- <div style="height:60px"></div> -->
      </div>

      <!--pulldown slot-->
      <div slot="pulldown" class="xs-plugin-pulldown-container xs-plugin-pulldown-down" style="position: absolute; width: 100%; height: 60px; line-height: 60px; top: -60px; text-align: center;">
        <span v-show="status2.pulldownStatus === 'default'"></span>
        <span class="pulldown-arrow" v-show="status2.pulldownStatus === 'down' || status2.pulldownStatus === 'up'" :class="{'rotate': status2.pulldownStatus === 'up'}">↓</span>
        <span v-show="status2.pulldownStatus === 'loading'">
          <spinner type="ios-small"></spinner>
        </span>
      </div>
    </scroller>

  </div>
</template>

<script>
import { Blur,Card, Scroller, Spinner, Countup } from 'vux'


export default {
  components: {
    Blur,
    Card,
    Scroller,
     Spinner,
    Countup
  },
  data () {
    return {
     url: 'http://file06.16sucai.com/2015/1126/22ee57582d53a8ad1ea259bc3ab2be1e.jpg',
     scroll: '',
     headertops:false,
     status2: {
        pulldownStatus: 'default'
      },
      heig:"100%",
    }
  },
  methods: {

    loadall () {
       this.$nextTick(function() {
          this.$refs.demo3.donePulldown()
          // console.log("F")
       })
    }
  },
  mounted () {
    this.heig=(document.documentElement.clientHeight-50)+'px';
    document.body.scrollTop=0;
    this.$nextTick(function() {
    var _this=this;
     setTimeout(()=>{this.$store.state.isload=false},100)
      // setTimeout(()=>{this.$store.dispatch('setLoading', false);},1000)
      // window.addEventListener('scroll', _this.scrollsbody)

    })
  }
}
</script>
<style lang="scss">
.center {
  text-align: center;
  padding-top: 20px;
  color: #fff;
  font-size: 18px;
  img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 5px solid rgba(255,255,255,0.4);
  position:relative;
  // display:inline-block;
 }
    &::before{
      content: "";
      display:inline-block;
      position:absolute;
      width:113px;
      height:113px;
      margin-left: -8px;
      margin-top: -8px;
      border-radius: 50%;
      border: 6px solid rgba(255,255,255,0.1);
    }
}

.personage {
  background-color: #f5f5f5;
  .card-demo-content01 {
    border-bottom: 1px solid #e5e5e5;
  }
}
.card-demo-flex {
  display: flex;
  margin-bottom: 10px;
  background-color: #fff;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-demo-flex > a {
  flex: 1;
  text-align: center;
  font-size: 12px;
  border-right: 1px solid #e5e5e5;
}
.card-demo-flex > div:last-child {
  border-right: 0px ;
}
.card-demo-flex .tip {
  color: #f74c31;
}
.logostop {
  position: absolute;
  top: 0;
  left: 0;
  color:#fff;
  height:46px;
  line-height: 46px;
  width:100%;
  padding: 0 15px;
  font-size: 16px;
  z-index: 10;
  .iconfont {
    font-size: 30px;
  }
  a {
    color:#fff;
    display:inline-block;
    width:50px;
    height:50px;
  }
}
.headerboc{
  background-color: #f00;
}
.gridlistbox {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  box-shadow: 1px 5px 7px #ccc;
  margin:10px;
  margin-bottom: 25px;
  .grid-box{
    padding: 15px;
    display:flex;
    text-align: center;
    background-color: #fff;
    .icons {
      font-size: 26px;
    }
    .rigbef {
      position:relative;
      &:after {
        content:"";
        // display
        right:0;
        bottom:-100%;
        width:1px;
        height:150%;
        position:absolute;
        background-color: #EAEAEA;
      }
       &:before {
        content:"";
        // display
        left:20%;
        bottom:-30%;
        width:260%;
        height:1px;
        position:absolute;
        background-color: #EAEAEA;
      }
    }
    .leftbef {
       position:relative;
      &:after {
        content:"";
        // display
        left:0;
        bottom:-100%;
        width:1px;
        height:150%;
        position:absolute;
        background-color: #EAEAEA;
      }
    }
    .flbox {
      flex:1;

    }
  }
}
.box2 {

  .name {
    position:absolute;
    left:0;
    width:100%;
    text-align: center;
    color:#fff;
    font-size: 20px;
  }
  .plrig {
      // flex: 1;
    display:flex;
    position:absolute;
    right:-3px;
    // width:100px;
    color:#fff;
    background-color: rgba(0,0,0,0.1);
    border-radius: 5px;
    border:1px solid rgba(255,255,255,0.7);
    // height:40px;
    padding: 4px 0;
    .once {
      border-right: 1px solid #000;
    }
    .numberbox{
      padding: 0 15px;
      flex: 1;
      font-size: 10px;
    }
  }
}
.liveuserdt {
  // display:flex;
  padding: 10px 15px;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
  .h1title{
    margin-bottom: 10px;
    border-bottom: 1px solid #E0E0E0;
    // flex:1;
    color:#333;
    font-size: 14px;
    text-indent: 0.5em;
    padding-bottom: 10px;
  }
  .content {
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 0;
    overflow: hidden;
    // height:300px;
    position:relative;
    // background-color: #f00;
    .toptitle {
      overflow:hidden;
      .userlogo {
        max-width: 60px;
        width:10%;
        float: left;
        img {
          width:100%;
          border-radius: 100%;
          border:1px solid #eee;
        }
      }
      .username {
        // padding:10px;
        width:60%;
        // padding-left: 3%;
        text-indent: 1em;
        float: left;

      }
        .datetime {
          float: left;
          font-size: 10px;
          width:30%;
          color:#A7A7A7;
          text-align: left;
          text-decoration: ellipsis;
          white-space:nowrap;

        }
    }
    .bottomtitle {
        // width:100%;
        padding-left: 14%;
        // background-color: #ff0;
        .articlecontents {
          width:100%;
          height:50px;
          background-color: #E6E6E6;
          overflow:hidden;
          display:flex;
          .articleimg {
            height: 50px;
            /* margin: 5%; */
            max-width: 70px;
            // margin-right: 5px;
            // margin-left: 5px;
            // margin-top: 5px;
            vertical-align: top;
            line-height: 50px;
            text-align: center;
          }
          .articletitle {
            flex: 1;
            min-width: 0;
            height:40px;
            margin: 5px;
            color: #999999;
            font-size: 13px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

        }
    }
  }
}

</style>
